<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: rgb(52, 52, 52);
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tree {
				position: relative;
				width: 500px;
				height: 700px;
				display: flex;
				justify-content: center;
			}

			.star {
				width: 50px;
				height: 50px;
				background-color: rgb(236, 234, 167);
				z-index: 999;
				margin-bottom: 40px;
				padding: 0;
				clip-path: polygon(50% 0, 65% 40%, 100% 40%, 72% 60%, 85% 100%, 50% 75%, 15% 100%, 28% 60%, 0% 40%, 35% 40%)
			}

			.tree li {
				list-style: none;
				position: absolute;
				top: 25px;
				width: 2px;
				background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.25));
				transform-origin: 50% 0%;
				animation: ease-in-out 4s swing infinite;
				height: calc(var(--i)*4px);
				animation-delay: calc(var(--i)*-0.23s);
			}

			@keyframes swing {

				0%,
				100% {
					transform: rotate(-30deg);
				}

				5%,
				45% {
					opacity: 0.25;
				}

				0%,
				50%,
				100% {
					opacity: 1;
				}

				50% {
					transform: rotate(30deg);
				}
			}

			.tree li::before {
				content: '';
				position: absolute;
				left: -1px;
				bottom: 1px;
				width: 3px;
				height: 3px;
			}

			.tree li:nth-child(4n)::before {
				background-color: #D8334A;
			}

			.tree li:nth-child(4n+1)::before {
				background-color: #00ffff;
			}

			.tree li:nth-child(4n+2)::before {
				background-color: #ffff00;
			}

			.tree li:nth-child(4n+3)::before {
				background-color: #ff557f;
			}
		</style>
	</head>
	<body>
		<ul class="tree">
			<div class="star"></div>
		</ul>

		<script type="text/javascript">
			let tree = document.querySelector('.tree')

			for (var i = 0; i < 128; i++) {
				let li = document.createElement('li')
				li.style = '--i:' + i
				tree.appendChild(li)
			}
		</script>
	</body>
</html>
